<template>
	<!-- 页面主体 -->
	<view>
		<u-toast ref="uToast" />
		<u-no-network></u-no-network>
		<u-navbar title="服务商品详情" safeAreaInsetTop fixed placeholder>
			<view class="coreshop-navbar-left-slot" slot="left">
				<u-icon name="arrow-left" size="19" @click="goNavigateBack"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="home" size="22" @click="goHome"></u-icon>
				<u-line direction="column" :hairline="false" length="16" margin="0 8px"></u-line>
				<u-icon name="share-fill" size="22" @click="goShare"></u-icon>
			</view>
			<view slot="right">
			</view>
		</u-navbar>

		<view class="coreshop-full-screen-banner-swiper-box">
			<u--image width="100%" height="375px" :src="info.thumbnail"></u--image>
		</view>

		<view
			class="coreshop-margin-left-16 coreshop-margin-right-16  coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
			<view class="coreshop-flex coreshop-justify-between coreshop-align-center">
				<view class="coreshop-text-red coreshop-font-weight-bold">
					<text class="coreshop-font-16">¥</text>
					<text class="coreshop-font-24">{{ info.money || '0.00' }}</text>
				</view>
				<view
					class="coreshop-flex-sub coreshop-flex coreshop-text-left coreshop-justify-end coreshop-align-center">
					<view class="coreshop-text-right coreshop-time-right"
						v-if="info.openStatus == 1 && info.timestamp > 0">
						<u-count-down :time="info.timestamp * 1000" :autoStart="true" :millisecond="true"
							format="DD天HH时mm分ss秒" @change="onChange" @finish="onFinish">
							<view class="time">
								<view class="coreshop-font-12">仅剩：</view>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.days }}</text>
								</view>
								<text class="time__doc">天</text>
								<view class="time__custom">
									<text
										class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds }}</text>
								</view>
							</view>
						</u-count-down>
					</view>
					<view class="coreshop-text-right coreshop-time-right"
						v-if="info.openStatus == 2 && info.timestamp > 0">
						<u-count-down :time="info.timestamp * 1000" :autoStart="true" :millisecond="true"
							format="DD天HH时mm分ss秒" @change="onChange" @finish="onFinish">
							<view class="time">
								<view class="coreshop-font-12">即将开始：</view>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.days }}</text>
								</view>
								<text class="time__doc">天</text>
								<view class="time__custom">
									<text
										class="time__custom__item">{{ timeData.hours>=10?timeData.hours:'0'+timeData.hours}}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.minutes }}</text>
								</view>
								<text class="time__doc">:</text>
								<view class="time__custom">
									<text class="time__custom__item">{{ timeData.seconds }}</text>
								</view>
							</view>
						</u-count-down>
					</view>
					<view class="coreshop-font-12" v-if="info.openStatus == 3">已结束</view>
				</view>
			</view>
			<view class="coreshop-margin-top-12 coreshop-multiple-line-clamp">
				<text
					class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">{{ info.title || '' }}</text>
			</view>
			<view class="coreshop-margin-top-8 coreshop-multiple-line-clamp">
				<text class="coreshop-font-14 coreshop-text-gray">{{ info.description || '' }}</text>
			</view>
			<view
				class="coreshop-margin-top-16 coreshop-padding-top-16 coreshop-solid-top coreshop-flex coreshop-justify-between coreshop-align-center coreshop-text-gray">
				<view class="coreshop-font-12">
					<text>已售：</text>
					<text class="font-color-orange">{{ goodsInfo.buyCount || '0' }}</text>
				</view>
				<view class="coreshop-font-12">
					<text>单包量：</text>
					<text>{{ info.ticketNumber }}</text>
				</view>
				<view class="coreshop-font-12">
					<text>剩余：</text>
					<text>{{info.amount || '0'}}</text>
				</view>
			</view>
		</view>

		<view
			class="coreshop-margin-left-16 coreshop-margin-right-16  coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
			<!--服务-->
			<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row"
				v-if="info.allowedMemberships&&info.allowedMemberships.length>0">
				<view class="coreshop-basis-2">
					<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">会员级别</text>
				</view>
				<view class="coreshop-basis-8 coreshop-flex coreshop-align-center">
					<view
						class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-align-center">
						<view class="coreshop-margin-left-10" v-for="(item, indexChild) in info.allowedMemberships"
							:key="indexChild">
							<u-tag :text="item" :plain="true" mode="light" size="mini" />
						</view>
					</view>
				</view>
			</view>
			<!--发货-->
			<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10"
				v-if="info.consumableStores.length>0" />
			<view
				class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-flex-direction-row coreshop-padding-top-10"
				v-if="info.consumableStores.length>0">
				<view class="coreshop-basis-2">
					<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">服务网点</text>
				</view>
				<view class="coreshop-coreshop-basis-8 coreshop-flex coreshop-align-center">
					<u-icon name="checkmark-circle" size="14" labelSize="12" color="#e54d42" :label="item"
						v-for="(item, index) in info.consumableStores" :key="index" class="coreshop-margin-right-10">
					</u-icon>
				</view>
			</view>
			<!--规格-->
			<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
			<view class="coreshop-flex coreshop-flex-wrap coreshop-font-sm coreshop-padding-top-10">
				<view class="coreshop-basis-2">
					<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">有效期</text>
				</view>
				<view class="coreshop-basis-8 coreshop-flex coreshop-align-center coreshop-font-12">
					{{info.startTime}} 至 {{info.endTime}}
				</view>
			</view>
		</view>

		<!--参数-->
		<view
			class="coreshop-margin-left-16 coreshop-margin-right-16  coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
			<!--内容区-->
			<view
				class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center">
				<view class="line-70"></view>
				<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">详情介绍</view>
				<view class="line-70"></view>
			</view>
			<view class="coreshop-margin-top-10 coreshop-bg-white">
				<u-parse :content="info.contentBody" :selectable="true" v-if="info.contentBody"></u-parse>
				<!-- 无数据时默认显示 -->
				<view class="coreshop-emptybox coreshop-padding-10" v-else>
					<u-empty :icon="$globalConstVars.apiFilesUrl+'/static/images/empty/data.png'" icon-size="150"
						text="详情为空" mode="list"></u-empty>
				</view>
			</view>
		</view>

		<!--常见问题-->
		<view
			class="coreshop-margin-left-16 coreshop-margin-right-16  coreshop-margin-top-12 coreshop-padding-16 coreshop-border-radius-9 coreshop-bg-white">
			<view class="coreshop-margin-bottom-16">
				<text class="coreshop-text-black coreshop-font-weight-bold coreshop-font-15">常见问题</text>
			</view>
			<view class="coreshop-flex coreshop-flex-wrap coreshop-margin-bottom-10 coreshop-flex-direction-row"
				v-for="(item, index) in serviceDescription.commonQuestion" :key="index">
				<view class="coreshop-basis-2 coreshop-font-13">
					{{item.title}}
				</view>
				<view class="coreshop-basis-8">
					<view class="coreshop-font-12">{{item.description}}</view>
				</view>
			</view>
			<view class="coreshop-solid-bottom coreshop-margin-top-10 coreshop-margin-bottom-10" />
			<view class="coreshop-text-center coreshop-text-blue  coreshop-padding-top-10 coreshop-font-13"
				@tap="goArticleList()">查看更多问题</view>
		</view>

		<!--为您推荐-->
		<view
			class="coreshop-margin-top-16 coreshop-margin-bottom-12 coreshop-flex coreshop-justify-center coreshop-align-center"
			v-if="shopRecommendData.length > 0">
			<view class="line-70"></view>
			<view class="coreshop-margin-left-12 coreshop-margin-right-12 coreshop-text-gray">为您推荐</view>
			<view class="line-70"></view>
		</view>
		<view class="coreshop-margin-left-16 coreshop-margin-right-16 index-goods coreshop-margin-top-10"
			v-if="shopRecommendData.length > 0">
			<custom-waterfalls-flow :value="shopRecommendData" @wapperClick="wapperClick" @imageClick="imageClick">
				<!-- #ifdef MP-WEIXIN -->
				<view class="goods" v-for="(item,index) in shopRecommendData" :key="index" slot="slot{{index}}">
					<view
						class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
						<view class="coreshop-title-294 coreshop-multiple-line-clamp">
							<text class="coreshop-font-14">{{item.name}}</text>
						</view>
						<view
							class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
							<view class="coreshop-text-red coreshop-font-weight-bold">
								<text class="coreshop-font-12">¥</text>
								<text class="coreshop-font-16">{{item.price}}</text>
								<span
									class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
							</view>
							<view>
								<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
							</view>
						</view>
						<view
							class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top"
							v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
							<view>
								{{ pointShowName}}兑换价:
							</view>
							<view class="coreshop-text-red">
								{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}
								元
							</view>
						</view>
						<view class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5"
							v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
							<view>
								购买赠送:
							</view>
							<view class="coreshop-text-red">
								{{item.points}}{{ pointShowName}}
							</view>
						</view>
					</view>
				</view>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<template v-slot:default="item">
					<view class="goods">
						<view
							class="coreshop-padding-top-6 coreshop-padding-bottom-3 coreshop-padding-left-8 coreshop-padding-right-8 coreshop-bg-white coreshop-border-radius-bl-18">
							<view class="coreshop-title-294 coreshop-multiple-line-clamp">
								<text class="coreshop-font-14">{{item.name}}</text>
							</view>
							<view
								class="coreshop-margin-top-8 coreshop-flex coreshop-justify-between coreshop-align-center">
								<view class="coreshop-text-red coreshop-font-weight-bold">
									<text class="coreshop-font-12">¥</text>
									<text class="coreshop-font-16">{{item.price}}</text>
									<span
										class="coreshop-font-xs  coreshop-text-through coreshop-margin-left-6 coreshop-text-gray">{{item.mktprice}}元</span>
								</view>
								<view>
									<text class="coreshop-font-10 coreshop-text-gray">{{item.buyCount+'人付款'}}</text>
								</view>
							</view>
							<view
								class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-10 coreshop-padding-top-10 coreshop-solid-top"
								v-if="pointSwitch==1 && pointExchangeModel==2 && pointShowExchangePrice==1 && item.pointsDeduction > 0">
								<view>
									{{ pointShowName}}兑换价:
								</view>
								<view class="coreshop-text-red">
									{{pointDiscountedProportion * item.pointsDeduction }}{{ pointShowName}}+{{ parseFloat(item.price-item.pointsDeduction).toFixed(2)}}
									元
								</view>
							</view>
							<view
								class="coreshop-flex coreshop-flex-direction-row coreshop-font-11 coreshop-margin-top-5"
								v-if="pointSwitch==1 && pointGetModel==2 && pointShowPoint==1 && item.points > 0">
								<view>
									购买赠送:
								</view>
								<view class="coreshop-text-red">
									{{item.points}}{{ pointShowName}}
								</view>
							</view>
						</view>
					</view>
				</template>
				<!-- #endif -->
			</custom-waterfalls-flow>
		</view>

		<!-- 分享弹窗 -->
		<view class="coreshop-padding-0">
			<u-popup mode="bottom" :show="shareBox" ref="share">
				<!-- #ifdef MP-WEIXIN -->
				<coreshop-share-wx :shareType='$globalConstVars.shareType.serviceGoods' :objectId="info.id"
					:shareImg="info.thumbnail" :shareTitle="info.title" :shareContent="info.description"
					:shareHref="shareHref" @close="closeShare()"></coreshop-share-wx>
				<!-- #endif -->
				<!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
				<coreshop-share-app :shareType='$globalConstVars.shareType.serviceGoods' :objectId="info.id"
					:shareImg="info.thumbnail" :shareTitle="info.title" :shareContent="info.description"
					:shareHref="shareHref" @close="closeShare()"></coreshop-share-app>
				<!-- #endif -->
			</u-popup>
			<div id="qrCode" ref="qrCodeDiv"></div>
		</view>

		<!--占位底部距离-->
		<view class="coreshop-tabbar-height" />
		<!--底部操作-->
		<view class="coreshop-good-footer-fixed">
			<view class="tabbar">
				<view
					class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-start coreshop-basis-4">
					<!-- 客服按钮 -->
					<!-- #ifdef APP-PLUS-NVUE || APP-PLUS -->
					<view class="action" @click="showChat()">
						<button class="noButtonStyle">
							<u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" labelPos="bottom">
							</u-icon>
						</button>
					</view>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="action">
						<button open-type="contact" bindcontact="showChat" class="noButtonStyle"
							:send-message-title="goodsInfo.name"
							:send-message-path="'/pages/goods/goodDetails/goodDetails?id='+goodsInfo.id"
							:send-message-img="goodsInfo.image" show-message-card="true">
							<u-icon name="server-fill" :size="20" label="找客服" :labelSize="12" labelPos="bottom">
							</u-icon>
						</button>
					</view>
					<!-- #endif -->
				</view>
				<view
					class="btn-group coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between coreshop-basis-4">
					<u-button type="success" size="normal" @click="toAddOrder" :disabled="disabled">立刻购买</u-button>
				</view>
			</view>
		</view>

		<!-- 登录提示 -->
		<coreshop-login-modal></coreshop-login-modal>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				id: 0,
				info: {},
				orderType: this.$globalConstVars.paymentType.serviceOrder, // 订单类型
				shopRecommendData: [], // 其他数据
				timeData: {},
				shareUrl: this.$globalConstVars.shareUrl,
				shareBox: false,
				serviceDescription: {
					commonQuestion: [],
					delivery: [],
					service: [],
				},
				disabled: false,
			}
		},
		onLoad(e) {
			this.id = e.id;
			//获取服务商品数据
			this.getDetail();
			//获取推荐商品数据
			this.getGoodsRecommendList();
			//获取服务说明
			this.getServiceDescription();
		},
		computed: {
			...mapState({
				hasLogin: state => state.hasLogin,
				userInfo: state => state.userInfo,
			}),
			hasLogin: {
				get() {
					return this.$store.state.hasLogin;
				},
				set(val) {
					this.$store.commit('hasLogin', val);
				}
			},
			userInfo: {
				get() {
					return this.$store.state.userInfo;
				},
				set(val) {
					this.$store.commit('userInfo', val);
				}
			},
			pointSwitch() {
				return this.$store.state.config.pointSwitch
			},
			pointShowExchangePrice() {
				return this.$store.state.config.pointShowExchangePrice
			},
			pointDiscountedProportion() {
				return this.$store.state.config.pointDiscountedProportion
			},
			pointExchangeModel() {
				return this.$store.state.config.pointExchangeModel
			},
			pointShowName() {
				return this.$store.state.config.pointShowName
			},
			pointGetModel() {
				return this.$store.state.config.pointGetModel
			},
			pointShowPoint() {
				return this.$store.state.config.pointShowPoint
			},
		},
		methods: {
			wapperClick(item) {
				this.goGoodsDetail(item.id)
			},
			imageClick(item) {
				this.goGoodsDetail(item.id)
			},
			onChange(e) {
				this.timeData = e
			},
			onFinish(e) {
				if (this.info.openStatus == 2) {
					this.info.openStatus == 1
					this.disabled = false;
				} else if (this.info.openStatus == 1) {
					this.info.openStatus == 3
					this.disabled = true;
				}
			},
			getDetail() {
				let data = {
					id: this.id
				};
				this.$u.api.getServiceDetail(data).then(res => {
					if (res.status) {
						this.info = res.data;
						if (res.data.openStatus == 3) {
							this.disabled = true;
						} else if (res.data.openStatus == 2) {
							this.disabled = true;
						}
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			// 获取推荐商品信息
			getGoodsRecommendList() {
				let _this = this;
				let data = {
					id: 10
				}
				_this.$u.api.getGoodsRecommendList(data).then(res => {
					if (res.status) {
						_this.shopRecommendData = _this.$u.randomArray(res.data);
					} else {
						_this.$u.toast(res.msg)
					}
				});
			},
			//获取服务项
			getServiceDescription() {
				let _this = this;
				this.$u.api.getServiceDescription().then(res => {
					if (res.status == true) {
						_this.serviceDescription.commonQuestion = res.data.commonQuestion;
						_this.serviceDescription.delivery = res.data.delivery;
						_this.serviceDescription.service = res.data.service;

					} else {
						_this.$refs.uToast.show({
							message: res.msg,
							type: 'error',
							complete: function() {
								uni.navigateBack({
									delta: 1
								});
							}
						})
					}
				})
			},
			toAddOrder() {
				//创建一个服务订单并跳转到支付
				let data = {
					id: this.id
				};
				this.$u.api.addServiceOrder(data).then(res => {
					if (res.status) {
						this.$u.route('/pages/payment/pay/pay?orderId=' + res.data + '&type=' + this.orderType +
							'&serviceId=' + this.id)
					} else {
						this.$u.toast(res.msg);
					}
				});
			},
			// 跳转到h5分享页面
			goShare() {
				this.shareBox = true;
			},
			closeShare() {
				this.shareBox = false;
			},
			//获取分享URL
			getShareUrl() {
				let data = {
					client: this.$globalConstVars.shareClient.wxMiNiProgram,
					url: this.$globalConstVars.shareUrl,
					type: this.$globalConstVars.shareModel.url,
					page: this.$globalConstVars.shareType.serviceGoods,
					params: {
						serviceGoodsId: this.info.id,
					}
				};
				let userToken = this.$db.get('userToken');
				if (userToken && userToken != '') {
					data.token = userToken
				}
				this.$u.api.share(data).then(res => {
					this.shareUrl = res.data
				});
			},
		},
		watch: {
			info: {
				handler() {
					this.getShareUrl();
				},
				deep: true
			}
		},
		//分享
		onShareAppMessage(res) {
			return {
				title: this.info.title,
				imageUrl: this.info.thumbnail,
				path: this.shareUrl
			}
		},
		onShareTimeline(res) {
			return {
				title: this.info.title,
				imageUrl: this.info.thumbnail,
				path: this.shareUrl
			}
		},
	}
</script>

<style lang="scss" scoped>
	@import "details.scss";
</style>
